<template>
  <div class="TravelScenicSpotContainer">
    <div class="ContainerHeader">
      <div class="container">
        <div class="top">
          <a href="#">目的地</a>
          <span> > </span>
          <a href="#">{{ TravelScenicSpotData.title }}</a>
          <span> > </span>
          <a href="#" class="strategy">
            {{ TravelScenicSpotData.title }}旅游攻略
          </a>
        </div>
        <div class="con">
          <h1>{{ TravelScenicSpotData.title }}</h1>
          <h6>
            (<a href=""
              ><span class="orange">{{ num }}</span
              >张图片</a
            >)
          </h6>
        </div>
        <div class="bottom">
          <div class="navbar-overview">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>概况</span>
            </a>
          </div>
          <div class="navbar-scenic">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>景点</span>
            </a>
          </div>
          <div class="navbar-hotels">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>酒店</span>
            </a>
          </div>
          <div class="navbar-flight">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>机票</span>
            </a>
          </div>
          <div class="navbar-local">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>当地玩乐</span>
            </a>
          </div>
          <div class="navbar-sales">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>旅游度假</span>
            </a>
          </div>
          <div class="navbar-community">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>社区</span>
            </a>
          </div>
          <div class="navbar-food">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>餐饮</span>
            </a>
          </div>
          <div class="navbar-maps">
            <a href="" class="navbar-btn">
              <i class="navbar-icon"></i>
              <span>地图</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="ContainerBody">
      <div class="container bodyflex">
        <div class="imgCon">
          <img v-lazy="TravelScenicSpotData.picUrl" alt="" />
          <div class="bg-imgtext">
            <span> {{ num }}张图片</span>
          </div>
        </div>
        <div class="infoCon">
          <h4 class="title">{{ TravelScenicSpotData.title }}印象</h4>
          <div class="bd">
            <ul class="tag" style="height: 140px; overflow: hidden">
              <li title="638篇游记提及">
                <a href="">离岛<em>638</em></a>
              </li>
              <li title="306篇游记提及">
                <a href="">海滩<em>306</em></a>
              </li>
              <li title="160篇游记提及">
                <a href="">商场<em>160</em></a>
              </li>
              <li title="142篇游记提及">
                <a href="l">饭馆<em>142</em></a>
              </li>
              <li title="136篇游记提及">
                <a href="">海鲜排挡<em>136</em></a>
              </li>
              <li title="75篇游记提及">
                <a href="">梭子蟹<em>75</em></a>
              </li>
              <li title="44篇游记提及">
                <a href="/jd/11505/23343.html" target="_blank"
                  >本岛风景<em>44</em></a
                >
              </li>
              <li title="29篇游记提及">
                <a href="/gw/11505/19520.html" target="_blank"
                  >特色街<em>29</em></a
                >
              </li>
              <li title="26篇游记提及">
                <a href="/gw/11505/19523.html" target="_blank"
                  >海产品<em>26</em></a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TravelScenicSpot",
  data() {
    return {
      num: "23123214",
    };
  },
  mounted() {},
  computed: {
    TravelScenicSpotData() {
      return JSON.parse(this.$route.query.itemData);
    },
  },
};
</script>

<style lang='stylus' scoped>
.TravelScenicSpotContainer {
  .ContainerHeader {
    width: 100%;
    height: 225px;
    background-color: #eee;
    position: relative;
  }

  .ContainerBody {
    margin-top: 20px;
  }
}

.bodyflex {
  display: flex;
}

.container {
  width: 1000px;
  margin: 0 auto;

  .top {
    padding: 15px 0;

    .strategy {
      color: #ff7000;
      font-weight: bold;
    }
  }

  .orange {
    color: #ff7000;
  }

  .con {
    display: flex;
    align-items: center;
    margin-top: 20px;

    h1 {
      font-size: 40px;
      font-weight: bold;
      margin-right: 20px;
    }
  }

  .bottom {
    width: 1000px;
    height: 75px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    div[class|="navbar"] {
      float: left;
      display: inline;
      margin-right: 18px;
      font-size: 16px;
      line-height: 32px;
    }

    .navbar-btn {
      display: block;
      height: 32px;
      padding: 20px 0 23px;
      color: #666;
      font-size: 14px;
      line-height: 32px;
      position: relative;
      text-decoration: none;

      &:hover {
        border-bottom: 5px solid #ff7000;
      }
    }

    .navbar-icon {
      float: left;
      width: 32px;
      height: 32px;
      margin-right: 6px;
      background: url('../assets/images/icon-place-nav6.png') no-repeat;
      overflow: hidden;
    }

    .navbar-overview .navbar-icon {
      background-position: 0 0;
    }

    .navbar-scenic .navbar-icon {
      background-position: 0 -320px;
    }

    .navbar-hotels .navbar-icon {
      background-position: 0 -120px;
    }

    .navbar-flight .navbar-icon {
      background: url('https://p3-q.mafengwo.net/s13/M00/34/CC/wKgEaVy32LKAK8RHAAAF8WtcgSw031.png') no-repeat;
      background-size: contain;
    }

    .navbar-local .navbar-icon {
      background-position: 0 -200px;
    }

    .navbar-sales .navbar-icon {
      background-position: 0 -160px;
    }

    .navbar-community .navbar-icon {
      background-position: 0 -240px;
    }

    .navbar-food .navbar-icon {
      background-position: 0 -360px;
    }

    .navbar-maps .navbar-icon {
      background-position: 0 -400px;
    }
  }

  .imgCon {
    margin-top: 20px;
    position: relative;
    width: 646px;
    font-size: 0;

    .bg-imgtext {
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.1);
      height: 60px;
      width: 100%;

      span {
        float: right;
        height: 40px;
        line-height: 40px;
        margin-top: 10px;
        margin-right: 20px;
        color: #fff;
        font-size: 18px;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 0 10px;
        border-radius: 10px;
        cursor: pointer;

        &:hover {
          background-color: rgba(0, 0, 0, 0.9);
        }
      }
    }
  }

  .infoCon {
    margin-top: 20px;
    margin-left: 60px;

    h4 {
      margin: 5px 0 7px;
      font-weight: normal;
      line-height: 30px;
      font-size: 16px;
    }

    .bd {
      height: 140px;
      font-size: 14px;

      .tag {
        display: block;
        width: 260px;
        height: 70px;
        overflow: hidden;
      }

      li {
        float: left;
        display: inline;
        margin: 0 0 6px 6px;

        a {
          float: left;
          padding: 4px 8px 4px 10px;
          height: 20px;
          border: 1px solid #fece72;
          line-height: 20px;
          font-size: 14px;
          color: #ff8a00;
          border-radius: 2px;
          white-space: nowrap;

          em {
            font-size: 12px;
            color: #999;
            font-family: verdana;
            font-style: normal;
          }
        }
      }
    }
  }
}
</style>